<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
import { toRefs } from 'vue'
import * as dayjs from 'dayjs'
import { oss } from '@/utils/config'
import { usePraise } from '@/hooks/usePraise.js'
import { useIsFocus } from '@/hooks/useIsFocus.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  list: { type: Object, default: {} },
  showImgBottom: { type: Boolean, default: false }
})
const { list } = toRefs(props)
// 关注、取消关注
const onIsFocus = (e) => {
  if (e.isFocusAuthor === 0) {
    e.isFocusAuthor = 1
  } else {
    e.isFocusAuthor = 0
  }
  useIsFocus({ toMemberId: e.memberId })
}
// 点赞
const onPraise = (e) => {
  console.log(e)
  if (list.value.isPraise === 0) {
    list.value.isPraise = 1
    list.value.praiseSum += 1
  } else {
    list.value.isPraise = 0
    list.value.praiseSum -= 1
  }
  usePraise({
    targetId: e.articleId,
    targetType: 2
  })
}
// 互助圈评论
const onRemark = (e) => {
  console.log(e)
  router.push(`/remark/${e.articleId}/2`)
}
</script>
<template>
  <div class="v-mutual">
    <div class="v-mutual-top">
      <div class="v-mutual-top-left">
        <van-image round width="2.2em" height="2.2em" :src="list.headImgUrl" />
        <div class="v-mutual-top-left-right">
          <p>{{ list.nickName }}</p>
          <p>{{ dayjs(list.createTime).format('YYYY.MM.DD') }}</p>
        </div>
      </div>
      <span
        v-if="list.isFocusAuthor != 3"
        :class="{
          'v-mutual-top-right-btn': true,
          'v-mutual-top-right-btn-active': list.isFocusAuthor === 0
        }"
        @click="onIsFocus(list)"
        >{{ list.isFocusAuthor === 0 ? '+ 关注' : '取消关注' }}</span
      >
    </div>
    <div class="v-mutual-txt">
      <p>
        {{ list.content }}
      </p>
      <lay-row v-if="showImgBottom">
        <lay-coloms
          :column="3"
          v-for="item in JSON.parse(list.images)"
          :key="item"
        >
          <div class="v-mutual-txt-img"><img :src="item" alt="" /></div
        ></lay-coloms>
      </lay-row>
    </div>
    <div class="van-hairline--top"></div>
    <div class="v-mutual-bottom" v-show="showImgBottom">
      <span @click="onRemark(list)"
        ><van-icon
          :name="oss + '/nutrition/web/%E8%AF%84%E8%AE%BA.png'"
        />评论</span
      >
      <span
        :class="{ 'v-praise-active': list.isPraise === 1 }"
        @click.stop="onPraise(list)"
        ><van-icon
          :name="
            oss +
            (list.isPraise === 1
              ? '/nutrition/web/%E7%82%B9%E8%B5%9E-active.png'
              : '/nutrition/web/%E7%82%B9%E8%B5%9E.png')
          "
        />{{ list.praiseSum }}</span
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
.v-mutual {
  padding: 15px 12px 0;
  margin-bottom: 5px;
  background: #ffffff;
  .v-mutual-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .v-mutual-top-left {
      width: 250px;
      display: flex;
      .v-mutual-top-head {
        width: 35px;
        height: 35px;
        background: #000;
        border-radius: 50% 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .v-mutual-top-left-right {
        margin-left: 10px;
        p {
          font-size: 14px;
          color: #212532;
          line-height: 18px;
        }
        p + p {
          font-size: 13px;
          color: #848484;
        }
      }
    }
    .v-mutual-top-right-btn {
      padding: 8px 12px 7px;
      font-size: 13px;
      color: #555555;
      background: #f8f8f8;
      border-radius: 15px;
    }
    .v-mutual-top-right-btn-active {
      color: #ffffff;
      background: linear-gradient(137deg, #4d90f5, #357efe);
    }
  }
  .v-mutual-txt {
    padding: 15px 0 20px;
    font-size: 15px;
    p {
      padding-bottom: 10px;
    }
    .v-mutual-txt-img {
      height: 108px;
      border-radius: 8px;
      background: #eee;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .v-mutual-bottom {
    padding: 17px 85px;
    color: #555555;
    display: flex;
    justify-content: space-between;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      .van-icon {
        font-size: 15px;
        margin-right: 6px;
      }
    }
  }
}
</style>
